<template>
  <div class="person">
    <h2>当前求和为：{{sum}}</h2>
    <button @click="Add">点我sum+1</button>
  </div>

</template>

<script lang="ts" setup name="Person">
import {onBeforeMount, ref,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';

let sum=ref(0);

function Add(){
    sum.value++;
}

//创建对象
console.log('创建对象')

//挂载
onBeforeMount(()=>{
  console.log('挂载前')
})

onMounted(()=>{
  console.log('挂载后')
})

//更新
onBeforeUpdate(()=>{
  console.log('更新前')
})

onUpdated(()=>{
  console.log('更新后')
})

//卸载
onBeforeUnmount(()=>{
  console.log('卸载前')
})

onUnmounted(()=>{
  console.log('卸载后')
})

</script>

<style>
.person {
  background-color: burlywood;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
  color: black; /* 设置字体颜色为黑色 */
}
</style>
